<template>
  <div>
    <n-card>
      <div
        style="
          margin-bottom: 10px;
          margin-bottom: 10px;
          display: flex;
          align-items: center;
          gap: 10px;
        "
      >
        <n-button type="primary" dashed size="small" @click="openDialog(1)">
          <template #icon>
            <n-icon>
              <AddCircleOutline />
            </n-icon>
          </template>
          新增碎片
        </n-button>
        <n-select
          size="small"
          style="max-width: 200px"
          v-model:value="tagValue"
          :options="options"
          :clearable="true"
          @update:value="selectChange"
        />
        <n-input
          placeholder="搜索描述"
          style="width: 200px"
          size="small"
          v-model:value="desc"
        >
          <template #prefix>
            <n-icon :component="SearchOutline" />
          </template>
        </n-input>
        <n-button :loading="btnLoading" type="success" @click="handleClick" size="small">
          <template #icon>
            <n-icon size="small">
              <SearchOutline />
            </n-icon>
          </template>
          查询
        </n-button>
        <!-- <n-button
          type="success"
          @click="openDialog(2)"
          size="small"
          style="margin-left: auto"
          color="#d82e2e"
        >
          <template #icon>
            <n-icon size="small">
              <FingerPrintOutline />
            </n-icon>
          </template>
          设置私密密码
        </n-button> -->
      </div>
      <!-- <n-skeleton text :repeat="6" /> -->
      <n-spin :show="loading">
        <n-data-table
          :columns="columns"
          :data="data"
          :row-key="rowKey"
          default-expand-all
          style="margin-bottom: 10px; width: 100%"
          :max-height="tableHeight"
          :scroll-x="1500"
        />

        <div style="display: flex; justify-content: flex-end">
          <n-pagination
            v-model:page="page"
            v-model:page-size="pageSize"
            :page-count="total"
            :on-update:page="updatePage"
            :on-update:page-size="updatePageSize"
            show-size-picker
            :page-sizes="[10, 20, 30, 40]"
          />
        </div>
      </n-spin>
    </n-card>

    <myDialog
      ref="myDialogRef"
      :data="tagData"
      :showModal="showModal"
      :dialogType="dialogType"
      :dialogTitle="dialogTitle"
      @closeModal="closeModal"
      @getImage="getImage"
    ></myDialog>
  </div>
</template>

<script setup>
import { ref, h, watch, inject, onMounted } from "vue";
import {
  AddCircleOutline,
  FlashOutline,
  SearchOutline,
  FingerPrintOutline,
  EyeOutline,
} from "@vicons/ionicons5";
import { NTag, NButton, NIcon, NPopconfirm, NPopover, NImage } from "naive-ui";
import myDialog from "./dialog.vue";
import { getImageList, getPhotoTag, deleteImage } from "@/api/loveDiary.ts";
import { getAllTag } from "@/api/tag.ts";

const imgUrl = import.meta.env.VITE_APP_API_KEY;
const page = ref(1);
const pageSize = ref(10);
const total = ref(0);
const loading = ref(false);
const btnLoading = ref(false);
const data = ref();
const tagData = ref();
const columns = ref([
   {
    type: "selection",
    fixed: 'left' 
  },
  {
    title: "原名称",
    key: "i_fileName",
    width: 150,
  },
  {
    title: "路径",
    key: "i_filePath",
    render(row) {
      return [
        h(
          NPopover,
          {
            trigger: "hover",
          },
          {
            trigger: () => {
              return h(
                NTag,
                {
                  style: {
                    marginRight: "6px",
                  },
                  type: "success",
                  bordered: false,
                },
                {
                  default: () => "路径",
                }
              );
            },
            default: () => {
              return row.i_filePath;
            },
          }
        ),
      ];
    },
  },
  {
    title: "预览",
    key: "i_filePath",
    render(row) {
      return [
        h(
          NPopover,
          {
            trigger: "hover",
            placement: "right",
          },
          {
            trigger: () => {
              return h(
                NTag,
                {
                  style: {
                    marginRight: "6px",
                  },
                  type: "success",
                  bordered: false,
                },
                {
                  default: () =>
                    h(NIcon, null, {
                      default: () => h(EyeOutline),
                    }),
                }
              );
            },
            default: () => {
              return h(NImage, {
                src: imgUrl + row.i_filePath,
                width: "200",
                previewDisabled: true,
              });
            },
          }
        ),
      ];
    },
  },
  {
    title: "描述",
    key: "i_description",
    render(row) {
      return [
        h(
          NPopover,
          {
            trigger: "hover",
          },
          {
            trigger: () => {
              return h(
                NTag,
                {
                  style: {
                    marginRight: "6px",
                  },
                  type: "success",
                  bordered: false,
                },
                {
                  default: () => "描述",
                }
              );
            },
            default: () => {
              return row.i_description;
            },
          }
        ),
      ];
    },
  },
  {
    title: "上传者",
    key: "i_uploader",
  },
  {
    title: "状态",
    key: "i_status",
    render(row) {
      return h(
        NTag,
        {
          style: {
            marginRight: "6px",
          },
          type: row.i_isEnable == 1 ? "success" : "error",
          bordered: false,
        },
        {
          default: () => (row.i_isEnable  ? "正常" : "禁用"),
        }
      );
    },
  },
  {
    title: "权限",
    key: "i_permissions",
    render(row) {
      return h(
        NTag,
        {
          style: {
            marginRight: "6px",
          },
          type: row.i_permissions ? "success" : "error",
          bordered: false,
        },
        {
          default: () => (row.i_permissions  ? "公开" : "私有"),
        }
      );
    },
  },
  {
    title: "上传时间",
    key: "i_uploadTime",
    width: 180,
  },
  {
    title: "大小(KB)",
    key: "i_size",
  },
  {
    title: "类型",
    key: "i_type",
  },
  {
    title: "所属文章",
    key: "i_belongsToArticle",
  },
  {
    title: "标签",
    key: "p_Tag.t_name",
    width: 100,
    render(row) {
      return h(
        NTag,
        {
          style: {
            marginRight: "6px",
          },
          type: "success",
          bordered: false,
        },
        {
          default: () => row.p_Tag?.t_name,
        }
      );
    },
  },
  {
    title: "操作",
    key: "actions",
    fixed: "right",
    render(row) {
      return [
        h(
          NPopconfirm,
          {
            positiveButtonProps: {
              size: "tiny",
            },
            negativeButtonProps: {
              size: "tiny",
            },
            onPositiveClick: (e) => {
              deleteImage(row.i_id).then((res) => {
                if (res.code == 200) {
                  window.$message.success(res.message);

                  getImage();
                } else {
                  window.$message.error(res.message);
                }
              });
            },
          },
          {
            trigger: () => {
              return h(
                NButton,
                {
                  style: { marginRight: "10px" },
                  strong: true,
                  secondary: true,
                  type: "error",
                  size: "small",
                },
                { default: () => "删除" }
              );
            },
            default: () => {
              return "确定要删除？";
            },
          }
        ),
        h(
          NButton,
          {
            strong: true,
            secondary: true,
            type: "warning",
            size: "small",
            onClick: () => updateImage(row),
          },
          { default: () => "编辑" }
        ),
      ];
    },
    width: 150,
  },
]);
const options = ref([]);
const tagValue = ref();

const showModal = ref(false);
const myDialogRef = ref(null);
const rowKey = (row) => row.i_id;
const tableHeight = ref(inject("tableHeight"));
const desc = ref(null);
const dialogType = ref(1);
const dialogTitle = ref("新增生活碎片");

onMounted(() => {
  getTag();
  getImage();
  getPhotoTag()
    .then((res) => {
      console.log(res);
      tagData.value = [];
      res.data.forEach((d) => {
        options.value.push({
          label: d.t_name,
          value: d.t_id,
        });
      });
      tagData.value = res.data;
    })
    .catch((err) => {});
});
const getImage = () => {
  loading.value = true;
  getImageList({
    page: page.value,
    pageSize: pageSize.value,
    tag: tagValue.value,
    desc: desc.value,
  })
    .then((res) => {
      if (res.code == 200) {
        data.value = [];
        data.value = res.data.data;
        total.value = parseInt(res.data.total / pageSize.value) + 1;
      } else {
        window.$message.error(res.message);
      }
      loading.value = false;
      btnLoading.value = false;
    })
    .catch((err) => {
      loading.value = false;
    });
};
const getTag = () => {
  // getAllTag().then((res) => {
  //   tagData.value = [];
  //   tagData.value = res.data;
  // });
};
const handleClick = (type = 1) => {
  btnLoading.value = true;
  loading.value = true;
  getImage();
};
const closeModal = () => {
  showModal.value = false;
};
const openDialog = (type = 1) => {
  showModal.value = true;
  if (type == 1) {
    dialogTitle.value = "新增生活碎片";
    dialogType.value = type;
    myDialogRef.value.init();
  } else if (type == 2) {
    dialogType.value = type;
    dialogTitle.value = "设置私密密码";
  }
};
const updateImage = (row) => {
  showModal.value = true;
  myDialogRef.value.init(row);
};
const updatePageSize = (ps) => {
  pageSize.value = ps;
  getImage();
};
const updatePage = (p) => {
  page.value = p;
  getImage();
};
const selectChange = () => {
  console.log(tagValue.value);
  getImage();
};
</script>
